<html>

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="content-type" content="text/httml; charset=UTF-8"/>
    
    <title>Terminplanung</title>
    
    <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" 
    	  rel="stylesheet" 
          type="text/css" />
          
    <link href="css/places.css" 
    	  rel="stylesheet" 
          type="text/css" />
          
    <link href="css/error.css" 
    	  rel="stylesheet" 
          type="text/css">
          
    <link rel="stylesheet" 
    	  href="css/tabs.css" 
          type="text/css"/>
          
    <!-- JQuery -->
    <script type="text/javascript" 
			src="js/jquery-1.6.2.min.js">
    </script>
    
    <!-- Fehlermanagement Routen -->
    <script type="text/javascript" 
			src="js/routeError.js">
    </script>
    
    <!-- Fehlermanagement Geocodierung -->
    <script type="text/javascript" 
			src="js/geocodeError.js">
    </script>
    
    <!-- Fehlerausgabe -->
    <script type="text/javascript" 
			src="js/standardError.js">
    </script>
    
    <!-- JQuery UI -->
    <script type="text/javascript" 
			src="js/jquery-ui-1.7.custom.min.js">
    </script>
    
    <!-- JQuery Tabs Initialisierung -->
    <script type="text/javascript">
		$(function() {
			var $tabs = $('#tabs').tabs();
	
			$(".ui-tabs-panel").each(function(i){
				   var totalSize = $(".ui-tabs-panel").size() - 1;
			});
	
			$('.next-tab, .prev-tab').click(function() { 
				   $tabs.tabs('select', $(this).attr("rel"));
				   return false;
			   });
		});
    </script>
        
    <!-- Google Maps API -->  
	<script type="text/javascript" 
	 		 src="http://maps.google.com/maps/api/js?v=3.7&sensor=false">
    </script> 
    
    <script type="text/javascript">
      
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
	  
	  // Karte
      var map;
	  
	  // Geocoder
      var geocoder;
	  
	  // Optimierte Wegpunktliste
      var optimizedWaypoints;
	  
	  // Route optimiert --> JA / NEIN
      var optimizeRoute = true;
	  
	  // LatLngBounds --> Sichtfeld anpassen
      var latlngbounds = new google.maps.LatLngBounds();
      var listSize = false;
      
      // Array zum speichern aller Kundenmarker
      var allCustomers = [];
      
      // Array zum speichern aller Informationsfenster
      var allWindows = [];
    
      // Definition der Symbole
      var customIcons = {
          red: {
            icon: './icons/marker_red.png',
          }, 
          orange: {
            icon: './icons/marker_orange.png',
          }, 
          green: {
            icon: './icons/marker_green.png',
          }, 
          setToRoute: {
            icon: './icons/setToRoute.png',
          },
          onCheck: {
            icon: './icons/onCheck.png',
          },
        };
     
    
      // Download von möglichen externen XML Dateien
      function downloadUrl(url, callback) {
          var request = window.ActiveXObject ?
              new ActiveXObject('Microsoft.XMLHTTP') :
              new XMLHttpRequest;
    
		  // Callback-Methode
          request.onreadystatechange = function() {
            if (request.readyState == 4) {
              callback(request.responseText, request.status);
            }
          };
    		
		  // AJAX-Request senden
          request.open('GET', url, true);
          request.send(null);
        }
    
        // XML Parsen...
        function parseXml(str) {
          if (window.ActiveXObject) {
            var doc = new ActiveXObject('Microsoft.XMLDOM');
            doc.loadXML(str);
            return doc;
            
          } else if (window.DOMParser) {
            return (new DOMParser).parseFromString(str, 'text/xml');
          }
        }

     
      // Einen Benutzer auf der Karte suchen
      // und seine Daten anzeigen
      function getUser(){
		  
        // Kunden ID auslesen
        var id = document.getElementById("k_kundenId").value;
        
        // Informationsfenster öffnen
        allWindows[id].open(map, allCustomers[id]);
        
        // Marker des Kunden sichtbar machen
        allCustomers[id].setVisible(true);
    
        // Karte auf den Kunden ausrichten
        map.setCenter(allCustomers[id].position);
		
		// Zoomfaktor anpassen
        map.setZoom(9);
      }
      
      // Alle Kunden, die sich zur Zeit in der Datenbank befinden
      // mittels Marker auf der Karte anzeigen
      function getAllUsers(){
        
          // Daten aus der Datenbank laden (XML)
          downloadUrl("getAllCustomers.php", function(data) {
            
            // XML Dokument lesen
            var xml = parseXml(data);
            var markers = xml.documentElement.getElementsByTagName("marker");
           
            // Jeden Kundenmarker einzeln darstellen
            for (var i = 0; i < markers.length; i++) {
           
                // Längen und Breitengrad extrahieren
                var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("k_geoY")),
                  parseFloat(markers[i].getAttribute("k_geoX"))
                );
                
                // LatLngBounds um Kunden erweitern
                latlngbounds.extend(point);
                
                // Kundendaten extrahieren
                var kunden_id = markers[i].getAttribute("k_id");
                var firma = markers[i].getAttribute("k_firma");
                var vorname = markers[i].getAttribute("k_vorname");
                var nachname = markers[i].getAttribute("k_nachname");
                var ort = markers[i].getAttribute("k_ort");
                var strasse = markers[i].getAttribute("k_strasse");
                var abrechnung = markers[i].getAttribute("k_abrechnung");
                var abrechnungsDatum = markers[i].getAttribute("k_abrechnungsDatum");
                var zaehler = markers[i].getAttribute("k_zaehler");
                var plz = markers[i].getAttribute("k_plz");
                var onRoute = markers[i].getAttribute("k_onRoute");
    
                // Marker kategorisieren (Tage seit der letzten Abrechnung)
                if(abrechnung<10)
                    var type = "green";
                else if((abrechnung <=25) && (abrechnung>=10))
                    var type = "orange";
                else if(abrechnung > 25)
                    var type = "red";
                 
                // Befindet sich der Kunde bereits in
                // einer Routenplanung?
                if(onRoute == 1){
                    var type = "onCheck";	
                }
                
                // Symbol setzen
                var icon = customIcons[type] || {};
                
                // Marker definieren
                var marker = new google.maps.Marker({
                    map: map,
                    position: point,
                    icon: icon.icon,
                    iconSafe: icon.icon,
                    firma: firma,
                    vorname: vorname,
                    nachname: nachname,
                    ort: ort,
                    plz: plz,
                    strasse: strasse,
                    abrechnung: abrechnung,
                    abrechnungsdatum: abrechnungsDatum,
                    zaehler: zaehler,
                    id: i,
                    kundenid: kunden_id,
                    onroute: onRoute
                });
                
                // Informationsfenster & ActionListener anhängen
                attach(marker);
                
                // Marker in Array speichern			
                allCustomers.push(marker);
            
            }
            
          // Die Karte so skalieren, dass alle Marker sichtbar sind 
          map.fitBounds( latlngbounds );
    
          }); 
      }
       
      // Den Markern das entsprechende
	  // Informationsfenster anhängen
      function attach(marker) {
     
         // Content des Informationsfensters
         // Marker die sich nicht auf einer Route befinden
         var content = 
            '<table class="infoWindowTable" border="0" width="400px">'+
            '<tr>'+
                '<td width="150px"><b>Firmenname</b></td>'+
                '<td>'+marker.firma+'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Ansprechpartner</b></td>'+
                '<td>'+ marker.vorname + ' ' + marker.nachname + '</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Strasse</b></td>'+
                '<td>'+marker.strasse+'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Ort</b></td>'+
                '<td>'+marker.plz + ', ' +marker.ort+'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Telefon:</b></td>'+
                '<td>0171-26625245</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Letzte Leerung</b></td>'+
                '<td>'+ marker.abrechnungsdatum +'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Zählerstand</b></td>'+
                '<td>'+ marker.zaehler +'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td colspan="4" align="center">'+
                '<input type="submit" class="button" name="cmd_addList" id="cmd_addList"'+
                'value="Zur Route hinzufügen" onclick="addToList('+marker.id+');" />  '+
                '<input type="submit" class="button" name="cmd_addList" id="cmd_addList"'+
                'value="Entfernen" onclick="removeFromList('+marker.id+');" /></td>'+
            '<tr>'+
            '</table>';
            
            
         // Content des Informationsfensters
         // Marker die sich auf einer Route befinden inkl. Eingabemöglichkeit
         var contentOnRoute = 
            '<table class="infoWindowTable" border="0" width="400px">'+
            '<tr>'+
                '<td width="150px"><b>Firmenname</b></td>'+
                '<td>'+marker.firma+'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Ansprechpartner</b></td>'+
                '<td>'+ marker.vorname + ' ' + marker.nachname + '</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Strasse</b></td>'+
                '<td>'+marker.strasse+'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Ort</b></td>'+
                '<td>'+marker.plz + ', ' +marker.ort+'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Telefon:</b></td>'+
                '<td>0171-26625245</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Letzte Leerung</b></td>'+
                '<td>'+ marker.abrechnungsdatum +'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
                '<td><b>Letzter Zählerstand</b></td>'+
                '<td>'+ marker.zaehler +'</td>'+
                '<td></td>'+
                '<td></td>'+
            '<tr>'+
            '<tr>'+
            '</table>'+
            '<div class="updateData">'+
            '<br><b>Aktueller Zählerstand des Kunden</b>'+
            '<input name="k_zaehlerstand"  class="inputField" type="text" id="k_zaehlerstand" />'+
            '<center><input name="" value="Zählerstand aktualisieren" type="button" class="button" onclick="updateData('+marker.id+');"></center>'+
            '</div>';
    
        // Anhängen: nicht auf einer Route
        if(marker.onroute == 0){
            var infowindow = new google.maps.InfoWindow({ 
              content: content, 
              id: marker.id 
            });
        }
		// Anhängen: auf einer Route
        else{
            var infowindow = new google.maps.InfoWindow({ 
              content: contentOnRoute, 
              id: marker.id 
            });
        }
        
        // ActionListener --> Klick
        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });
        
        // Zum Array allWindows hinzufügen
        allWindows.push(infowindow);
    
    }
	
      // Zählerstand der Kunden aktualisieren
      function updateData(id){
          
		var ajaxRequest;  
        
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    standardError("Es ist ein Fehler aufgetreten: "+ e);
                    return false;
                }
            }
        }
        
		// Nach erfolgreichem Datenupdate --> Marker erneuern, Info ausgeben
        ajaxRequest.onreadystatechange = function(){
            if(ajaxRequest.readyState == 4){
                standardInfo("Die Kundendaten wurden aktualisiert");
				renewAllMarkers();
            }
        }
        
        // String zum Datenabgleich zusammensetzen
        var queryString = allCustomers[id].kundenid+"&zaehlerstand="+document.getElementById("k_zaehlerstand").value;
        
		// AJAX-Request senden
        try {
            ajaxRequest.open("GET", "updateData.php?id=" + queryString, true);
			ajaxRequest.send(null); 
            
        } catch (e) {
            standardError("Daten konnten nicht eingetragen werden!");
        }
	
      }
    
        // Löscht alle Elemente aus einer Liste
        function clearList(){
            
			// Listengröße
			var size = document.getElementById("ortsliste").size;
            size = size-1;
            
			// Liste durchlaufen
            for(var i = size; i>=0; i--){
    
                allCustomers[document.getElementById("idliste")[i].id].setIcon(allCustomers[document.getElementById("idliste")[i].id].iconSafe);
                document.getElementById("ortsliste").removeChild(document.getElementById("ortsliste").lastChild);
                document.getElementById("idliste").removeChild(document.getElementById("idliste").lastChild);
            }
            
            document.getElementById("ortsliste").size = 1;
            document.getElementById("idliste").size = 1;
        
        }
    
        // ALle Marker auf der Karte neu laden
        function renewAllMarkers(){
             
			 // Alle Marker entfernen
			 for (var i = 0; i < allCustomers.length; i++){
                 allCustomers[i].setMap(null);
             }
			 
             // Kunden & Informationsfenster löschen
             allCustomers = new Array();
             allWindows = new Array();
             
			 // Kunden neu Laden
             getAllUsers();
        }
    
	    // Kunde von der Routenliste löschen
        function removeFromList(id){
    
            for(var i = 0; i < document.getElementById("ortsliste").length; i++){
                if(document.getElementById("ortsliste")[i].id == id){
                    document.getElementById("ortsliste").remove(i);
                    document.getElementById("idliste").remove(i);
                    document.getElementById("ortsliste").size-=1;
                }
            }
            
            // Ort auf der Karte so kennzeichnen das erkennbar ist,
            // dass er bereits zur Route hinzugefügt wurde
            allCustomers[id].setIcon(allCustomers[id].iconSafe);
            
            // Das Informationsfenster schließen
            allWindows[id].close(); 
    
      }
    
      // Ort zur Route hinzufügen
      function addToList(id){
            
            // Ortsdaten zur Liste hinzufügen
            var opt = document.createElement("option");
            opt.text = allCustomers[id].plz + " " + allCustomers[id].ort + ", " + allCustomers[id].strasse;
            opt.value = allCustomers[id].plz + " " + allCustomers[id].ort + ", " + allCustomers[id].strasse;
            opt.id = id;
            
            // Befindet sich noch kein Element in der Ortsliste,
            // wird der Ort zur Liste hinzugefügt.
			// Die Liste wird nicht vergrößert
            if(document.getElementById("ortsliste").length == 0){
                document.getElementById("ortsliste").options.add(opt);
                listSize = true;
            }
			
            // Wird ein weiterer Ort zur Liste hinzugefügt, wird die
            // Liste entsprechend vergrößert
            else{
                document.getElementById("ortsliste").size+=1;
                document.getElementById("ortsliste").options.add(opt);
            }
            
            // Abspeichern der Kunden IDs in einer seperaten Liste
            var opt = document.createElement("option");
            opt.text = id;
            opt.value = id;
            opt.id = id;
            document.getElementById("idliste").options.add(opt);
            
            // Ort auf der Karte so kennzeichnen das erkennbar ist,
            // dass er bereits zur Route hinzugefügt wurde
            allCustomers[id].setIcon("./icons/setToRoute.png");
            
            // Informationsfenster des Markers schließen
            allWindows[id].close(); 
      }
      
        // Alle Marker des angegebenen Typs von der 
        // Karte ausblenden
        function hide(type){
		  for (var i = 0; i < allCustomers.length; i++) {
            
			// Bestimmter Typ
			if(allCustomers[i].icon == type){
                allCustomers[i].setVisible(false);
            }
			
			// Alle Marker
            if(type == 'all'){
                allCustomers[i].setVisible(false);
            }
          }
        }
        
        // Alle Marker des angegebenen Typs auf der
        // Karte anzeigen
        function show(type){
          for (var i = 0; i < allCustomers.length; i++) {
            if(allCustomers[i].icon == type){
            	allCustomers[i].setVisible(true);
            }
          }
        }
        
        // Abfrage ob eine Checkbox angeklickt bzw.
        // nicht angeklckt ist. Je nach Zustand werden 
		// die Marker ein bzw. ausgeblendet
        function boxclick(box,type) {
            if (box.checked) {
              show(type);

				// Alle Kategorien angeklickt --> Checkbox "Alle Kategorien"
				// auf angeklickt setzen
				if((document.getElementById("chk_red").checked == true) &&
				   (document.getElementById("chk_orange").checked == true) &&
				   (document.getElementById("chk_green").checked == true)){
					  document.getElementById("chk_All").checked = true; 
				   }
		 	} 
            	
				// Eine Checkbox nicht geklickt --> Checkbox "Alle Kategorien" 
				// nicht angeklickt
				else {
				  document.getElementById("chk_All").checked = false;
				  hide(type);
				}
        };
        
        
        // Alle Kunden anzeigen / ausblenden
        function showHideAll(box) {
            
			// Alle Kunden anzeigen
			// --> Checkboxen auf angeklickt setzen
			if (box.checked) {
                  document.getElementById("chk_red").checked = true;
                  document.getElementById("chk_orange").checked = true;
                  document.getElementById("chk_green").checked = true;
                  
				  // Alle Kunden darstellen
				  for (var i = 0; i < allCustomers.length; i++) {
                    if(allCustomers[i].icon != "./icons/setToRoute.png")
                    allCustomers[i].setVisible(true);
                  } 
            } 
			// Alle Kunden ausblenden
			// --> Checkboxen auf nicht angeklickt setzen
            else {
                  document.getElementById("chk_red").checked = false;
                  document.getElementById("chk_orange").checked = false;
                  document.getElementById("chk_green").checked = false;
                  
				  // Alle Kunden ausblenden
				  for (var i = 0; i < allCustomers.length; i++) {
                    if(allCustomers[i].icon != "./icons/setToRoute.png")
                    allCustomers[i].setVisible(false);
                  }
            }
        };
        
      // Funktion die abfrägt in welchem Status sich die
      // Checkbox zur Optimierung der Route befindet
      // Je nach Status wird die Route optimiert bzw. nicht optimiert.
      function optimizeIt(box) {
            if (box.checked) {
                optimizeRoute = true;
            }
            else{
                optimizeRoute = false;
            }
			
			// Route neu berechnen
            myRoute();
      }
      
      // Einen Datensatz zur Routenliste hinzufügen
      function addData(){
            var adress = document.getElementById("k_adresse").value;
            var opt = document.createElement("option");
            opt.text = adress;
            opt.value = adress;
            document.getElementById("ortsliste").options.add(opt);	
      }
      
       // Einen Datensatz zur Routenliste hinzufügen
      function addDataWindow(ort){
          alert(ort);
            var opt = document.createElement("option");
            opt.text = ort;
            opt.value = ort;
            document.getElementById("ortsliste").options.add(opt);	
      }
      
      // Einen Datensatz aus der Routenliste entfernen
      function removeData(){
    
            var id = document.getElementById("idliste").options[document.getElementById("ortsliste").selectedIndex].value;
            document.getElementById("idliste").remove(document.getElementById("ortsliste").selectedIndex); 
            document.getElementById("ortsliste").remove(document.getElementById("ortsliste").selectedIndex); 
            document.getElementById("ortsliste").size-=1;
            if(document.getElementById("ortsliste").size == 0){
                document.getElementById("ortsliste").size = 1;	
            }
            
            allCustomers[id].setIcon(allCustomers[id].iconSafe);
      }

      // Ausdrucken der Route
      function printRoute(){
        
        // Start und Zielpunkt der Route
        var start = document.getElementById("txt_start").value;
        var ziel = document.getElementById("txt_ziel").value;
        
        // Adresse um die Anfrage abzusenden
        var routeString = "http://maps.google.com/maps?q=";
        
        // Anzahl der Wegpunkte zwischen Start und Ziel
        var length = optimizedWaypoints.length;
        
        // Erweiterung --> Startpunkt
        routeString+="from:"+start; 
        
        // Erweiterung --> Wegpunkte
        for(var i = 0; i<length; i++){
            routeString+=" to:"+document.getElementById("ortsliste").options[optimizedWaypoints[i]].value;
        }
        
        // Erweiterung --> Zielpunkt
        routeString+=" to:"+ziel; 
    
        // Druckansicht öffnen
        window.open(routeString);
      }
      
    
      // Eine Route berechnen
        function myRoute(){
            
            document.getElementById("chk_All").checked = false;
            document.getElementById("chk_green").checked = false;
            document.getElementById("chk_orange").checked = false;
            document.getElementById("chk_red").checked = false;
            
            // Startpunkt
            var start = document.getElementById("txt_start").value;
			
            // Zielpunkt
            var end = document.getElementById("txt_ziel").value;
            
			// Wegpunkte innerhalb der Route
            var wayp = [];
        
            // Alle Wegpunkte aus der Liste laden...
            for(var i = 0; i < document.getElementById("ortsliste").length; i++){
                wayp.push({
              location:document.getElementById("ortsliste")[i].value,
              stopover:true
            });	
            }
    
            // Request an Google Maps absetzen
            var request = {
                origin:start, 
                destination:end,
                waypoints: wayp,
                optimizeWaypoints: optimizeRoute,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                provideRouteAlternatives: true,
              };
              
              directionsService.route(request, function(result, status) {
                
				// Berechnung erfolgreich?
				if (status == google.maps.DirectionsStatus.OK) {
    
                // Alle Marker ausblenden
                hide("all");
    
                document.getElementById("dirPanel").style.visibility = 'hidden';
            
                // Gesamtkilometerzahl berechnen			
                var route = result.routes[0];
                var summaryPanel = document.getElementById("dir_panel");
                var gesamtKm = 0;
                var gesamtZeit = 0;
                    
				// Wegpunktreihenfolge abfragen
				optimizedWaypoints = route.waypoint_order;	
				
				// Gesamtkilomter der Strecke berechnen
				for(var i = 0; i < route.legs.length; i++){
					gesamtKm += route.legs[i].distance.value;	
				}
				
				// Gesamtdauer der Fahrt berechnen
				for(var i = 0; i < route.legs.length; i++){
					gesamtZeit += route.legs[i].duration.value;	
				}
				
			  // Streckeninformationen ausgeben
			  document.getElementById("streckeninfos").innerHTML =
			  "<b>Reisedauer:</b> " + formatTime(gesamtZeit) + "<br><b>Strecke:</b>" + formatLength(gesamtKm);
			  
			  // Streckeninformationen anzeigen
			  $('#reiseInfos').slideDown(500);
			  
			  // Route anzeigen
			  directionsDisplay.setDirections(result); 
			  }
			  
			  // Es ist ein Fehler aufgetreten
			  else{
				  routeError(status);	
			  }
			});
    
            directionsDisplay.setMap(map);
            directionsDisplay.setPanel(document.getElementById("dirPanel"));
        }
        
        // Ausgabe einer formatierten Zeitangabe
        // der vorrausichtlichen Dauer der Fahrt in
        // der Form: X Stunden Y Minuten
        function formatTime(sekunden) {
          var tage;
          var stunden;
          var minuten;
          
          // Wieviele Tage dauert die Reise?
          // Umrechnung Sekunden --> Tage
          tage = parseInt(sekunden / (24*3600));
          
		  // Ganze Tage von der Gesamtzahl der Sekunden
          // subtrahieren
          sekunden -= tage * 24 * 3600;
          
		  // Wieviele Stunden dauert die Reise?
          // Umrechnung Sekunden --> Stunden
          stunden = parseInt(sekunden / 3600);
		  
		  // Ganze Stunden von der Gesamtzahl der Sekunden
          // subtrahieren
          sekunden -= stunden * 3600;
		  
		  // Gleiches Schema wie Stunden und Tage
          minutes = parseInt(sekunden / 60);
          sekunden -= minutes * 60;
          var dauer = "";
          
          // Mehr als einen Tag?
          if (tage > 0) 
            dauer += tage + " Tag  ";
			
          // Mehr als eine Stunde?
          if (tage > 0 || stunden > 0) 
            dauer += stunden + " Stunden  ";
			
          // Mehr als eine Minute?
          if (tage > 0 || stunden > 0 || minuten > 0) 
            dauer += minutes + " Minuten ";
            
          return(dauer);
    }
    
        // Ausgabe einer formatierten Längenangabe
		// in Kilometern
        function formatLength(meter) {
              var km = parseInt(meter / 1000);
              meter -= km * 1000;
              
              var strecke = "";
              
              if (km > 0){
                strecke += km + " km ";
              }
              
              return(strecke);
        }
        
		// Zoomfaktor erhöhen
        function zoomIn(){
            zoom = map.getZoom();
            zoom++;
            map.setZoom(zoom);
        }
        
		// Zoomfaktor erniedrigen
        function zoomOut(){
            zoom = map.getZoom();
            zoom--;
            map.setZoom(zoom);
        }
		
  // Funktion die eine Route in der
  // Datenbank abspeichert
  function insertRoute(){
	
	$('#reiseInfos').slideUp(500);
	document.getElementById("txt_start").value = "";
	document.getElementById("txt_ziel").value = "";
	
	var ajaxRequest;
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				standardError("Es ist ein Fehler aufgetreten: " +e);
				return false;
			}
		}
	}
	
	// Wurde der Request erfolgreich ausgeführt?
	// --> Information darüber ausgeben
	// --> Marker aktualisieren
	// --> Route ausblenden
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			standardInfo("Die Kunden wurden zu einer Route hinzugefügt");
			renewAllMarkers();
			directionsDisplay.setMap(null);
			
		}
	}
	
	// String zum übergeben der Wegpunkte
	var queryString = "";
	
	// queryString zusammensetzen
	for(var i = 0; i < document.getElementById("idliste").length; i++){
			
			// Der erste Wegpunkt...
			if(i == 0){
				id = document.getElementById("idliste")[i].id;
				queryString = queryString.concat("?waypoint"+i+"="+allCustomers[id].kundenid);
			}
			
			// Die restlichen Wegpunkte
			else{
				id = document.getElementById("idliste")[i].id;
				queryString = queryString.concat("&waypoint"+i+"="+allCustomers[id].kundenid);
			}
	}
	
	try {
		
		// AJAX-Request senden
		ajaxRequest.open("GET", "insertRoute.php" + queryString, true);
		ajaxRequest.send(null);
		 
		// Nach speichern der Route --> Route ausblenden
		directionsDisplay.setMap(null);
		
		// Wegpunktliste leeren
		clearList();
		
	} catch (e) {
		standardError("Daten konnten nicht eingetragen werden!");
	}

}
        
		// Einen Ort auf der Karte anzeigen
        function myGeocode() {
			
        // Ort der Codiert werden soll
        var address = document.getElementById("k_adresse").value;
        
        if (geocoder) {
          geocoder.geocode( { 'address': address}, function(results, status) {
            
			// Geocodierung erfolglreich?
			if (status == google.maps.GeocoderStatus.OK) {
              show('.icons/marker_red.png');
              map.setCenter(results[0].geometry.location);
              map.setZoom(10);
            }
			
			// Fehler aufgetreten 
            else {
                geocodeError(status);	
            }
          });
        }
      }
      
      
     
      // Karte initialisieren mit festen Koordinaten als Mittelpunkt
      function initialize() {
            
			// Alle Kunden anzeigen
			getAllUsers();
            
            document.getElementById("dirPanel").style.visibility = 'hidden';
            geocoder = new google.maps.Geocoder();
            directionsDisplay = new google.maps.DirectionsRenderer();
            var geo_home = new google.maps.LatLng(49.2477789, 7.3585368);
           
		    // Kartenoptionen
		    var myOptions = {
              zoom: 15,
              navigationControl: false,
              mapTypeControl: false,
              scaleControl: false,
              mapTypeId: google.maps.MapTypeId.TERRAIN,
              center: geo_home
            }
            
			// Karte initialisieren  
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

      }
     
    </script>
    
</head>

<body onLoad="initialize(); ">
	
    <!-- Fehlerausgabe -->
    <div id="errorInfo" class="errorInfo">
    
    </div>
    
     <!-- Informationsausgabe -->
    <div id="OkInfo" class="OkInfo">
    
    </div>
    
    <!-- Platz für die Karte reservieren -->
    <div id="map_canvas" style="float:left;width:100%;height:100%;"> 
    
    </div>
    
    <!-- Steuerung -->
    <div id="tabSteuerung" class="tabSteuerung">
      <center>
      <b>Startpunkt</b><br>
          <label for="txt_name"></label>
          <input name="txt_start" type="text" class="inputField" id="txt_start">
      <br>
      <br>
        <b>Zielpunkt</b><br>
        <label for="txt_ziel"></label>
        <input type="text" name="txt_ziel" id="txt_ziel" class="inputField">
      <br>
      <br>
        <b>Streckenabschnitte</b><br>
        <select name="ortsliste" size="1" multiple="multiple" class="listBasis" id="ortsliste">
        </select>
      <br>
        <input type="button" name="button3" id="button3" class="button"
        value="-" onClick="removeData();">
                
        <input type="button" name="button2" id="button2" class="button"
        value="Route Berechnen" onClick="myRoute(); hide('marker_red.png');"> 
        
        <input type="button" name="button6" id="button6" class="button"
        value="clear list" onClick="clearList();">
      <br>
      <br>
	
    	<!-- Ausgabe von Routendaten (Strecke/Kilometer) -->
        <div id="reiseInfos" class="reiseInfos"> 
        
            <div id="streckeninfos" >
            
            </div>
            
                <input type="button" class="button" id="commitRoute" value="Route bestätigen" onClick="insertRoute(); ">
                <input type="button" id="printRoute" class="button" value="Druckansicht" onClick="printRoute();">
                <br><br>
        </div>
      
      </center>
      
      
      <!-- Tabs -->
      <div id="tabs">
        <ul> 
          <li><a href="#fragment-1">Ort anzeigen</a></li>   
          <li><a href="#fragment-2">Kunde anzeigen</a></li> 
          <li><a href="#fragment-3">Optionen</a></li>
        </ul>
    
    	 <!-- Tab 01: Ort anzeigen -->
         <div id="fragment-1" class="ui-tabs-panel">
              Ort<br>
              <input name="k_adresse"  class="inputField" type="text" id="k_adresse" />
              <br>
              
              <input type="button" name="button" id="button" class="button"
              value="-" onClick="zoomOut();">
              
              <input type="button" name="btn_geocode" class="button"
              id="btn_geocode" value="Ort anzeigen" onClick="myGeocode();" />
              
              <input type="button" name="button5" id="button5" class="button"
              value="+" onClick="zoomIn();">
         </div>
         
         <!-- Tab 02: Kunde anzeigen -->
         <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
              Kundennummer<br>
              <input name="k_kundenId"  class="inputField" type="text" id="k_kundenId" 
                               />
              <br>
              <input type="button" name="button4" id="button4" class="button"
              value="Kundendaten anzeigen" onClick="getUser();">
         </div>

		 <!-- Tab 03: Optionen -->
         <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
          <table width="100%">
            <tr>
                  <td>
                        <input name="chk_All" type="checkbox" id="chk_All" 
                        onClick="showHideAll(this)" value="optimize" checked>
                        Alle Kunden anzeigen 
                  </td>
                  <td>
                        <input name="CheckboxGroup1_" type="checkbox" id="CheckboxGroup1_2"
                        onClick="optimizeIt(this)" value="optimize" checked>
                        Route optimieren
                  </td>
                  <td>
                  </td>
            </tr>
            <tr>
              	  <td>
                  		<input name="chk_red" type="checkbox" id="chk_red"
                        onClick="boxclick(this,'./icons/marker_red.png')" value="optimize" checked>
                		Leerung erforderlich 
                  </td>
                  
              	  <td></td>
                  <td></td>
            </tr>
            
            <tr>
              	  <td>
                  		<input name="chk_orange" type="checkbox" id="chk_orange"
                        onClick="boxclick(this,'./icons/marker_orange.png')" value="optimize" checked>
                  		Leerung bald erforderlich
                  </td>
             	  
                  <td></td>
                  <td></td>
            </tr>
            
            <tr>
              <td>
                  		<input name="chk_green" type="checkbox" id="chk_green"
                        onClick="boxclick(this,'./icons/marker_green.png')" value="optimize" checked>
                  		Gerade erst geleert
              </td>
              
              <td></td>
              <td></td>
            </tr>
           
          </table>
        </div>
        
</div></div>
    </div>

	<!-- Ausgabe der Route (deaktiviert -->
    <div id="dirPanel" class="dirPanel"> 
    
    </div>
    
      <select id="idliste" style="display:none;" name="idliste" multiple="multiple" class="listOrte">
          </select>
    
</body>
</html>
